<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cTree</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.tree { text-align:left;font-size:12px; }
.tree a { color:#333333; text-decoration:none; font-size:12px; }
.tree a:hover { color:#0000ff; text-decoration:none; }
.tree a.select { color:#ffffff; background-color:#003366; padding:1px 1px; display:inline-block; }
.tree a.select:hover { color:#ffffff; text-decoration:none; }
</style>
<script src="ctree.js" type="text/javascript"></script>
</head>
<body>
<table width="98%" border="0" align="center" cellpadding="2" cellspacing="1" class="tableborder">
  <tr>
    <th align="left">Tree1</th>
    <th align="left">Tree2</th>
  </tr>
  <tr>
    <td width="50%" valign="top" nowrap="nowrap"><div class="tree">
        <div id="treelist1">Loading ...</div>
      </div>
      <div id="functionDiv" style="position:absolute;display:none;"></div></td>
    <td width="50%" valign="top" nowrap="nowrap"><div class="tree">
        <div id="treelist2">Loading ...</div>
      </div></td>
  </tr>
</table>
<script src="treeData.js" type="text/javascript"></script>
<script type="text/javascript">
var imagePath="images/tree/";
var root=0;
var showAll=true;
if(data.length>70){
	showAll=false;
}

var tree1=new cTree(document.getElementById("treelist1"),data,imagePath,root,showAll);
tree1.show();
tree1.showNode=function(obj,id){
	//window.status=id;
	var name=obj.innerHTML;
	var html="";
	html+="<div>";
	html+="<input type='button' class='button' value='Add' onclick='addNode("+id+");' />";
	html+="<input type='button' class='button' value='Edit' onclick='editNode("+id+");' />";
	html+="<input type='button' class='button' value='Delete' onclick='return delNode("+id+");'/>";
	html+="</div>";
	//
	var treefunlayer=document.getElementById("functionDiv");
	treefunlayer.style.display="";
	treefunlayer.innerHTML=html;
	var pos = getAbsPos(obj);
	var x = pos.x+obj.offsetWidth+2;
	var y = pos.y;
	treefunlayer.style.left = x+"px";
	treefunlayer.style.top = y+"px";
}
function getAbsPos(obj){
	var x_ = y_ = 0;
	while(obj.offsetParent){
		x_ += obj.offsetLeft;
		y_ += obj.offsetTop;
		obj = obj.offsetParent;
	}
	x_ += obj.offsetLeft;
	y_ += obj.offsetTop;
	return {x:x_,y:y_};
}
function addNode(id){
	window.status=id;
}
function editNode(id){
	window.status=id;
}
function delNode(id){
	if(confirm('Are you sure that you want to permanently delete the selected?')){
		window.location.href="?action=del&id="+id;
	} else {
		return false;
	}
}

var selectList=[114,17]
var tree2=new cTree(document.getElementById("treelist2"),data,imagePath,root,showAll,selectList);
tree2.show();
tree2.updateCheck=function(o){
	window.status=o.value;
}
</script>
</body>
</html>
